
<style scoped>
page {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
}
</style>
<template>
    <view class="page">
		<tab :list="tab_list" :tabIndex="tabIndex" @tab="tabClick"></tab>
		<view class="loadingBox flex-1 flex flex-column justify-around align-center" v-if="loading&&!listCatchData[tabIndex]">
			<view class="spinner"></view>
		</view>
		<swiper class="flex-1" @change="changeSwiper" :current="tabIndex" v-else>
			<swiper-item class="swiper-item" v-for="(item,index) in tab_list" :key="index">
				<list-item :list="listCatchData[index]" :load="load[index]" @listloadmore="listloadmore" @refreshList="refreshList"></list-item>
			</swiper-item>
		</swiper>
    </view>
</template>

<script>
import {socialHome} from '@/utils/http'
import listItem from '@/components/list/list-item-child.vue'

export default {
    components:{
		listItem
    },
    data() {
        return {
			autoplay: true,
			interval:6000,
			duration:500,
            banners:[],
			bannerImgs:[],
            index_page:0,
            total_page:1,
            list:[],
			tab_list:[{
				id:'',
				name:'全部'
			},{
				id:1,
				name:'未匹配'
			}, {
				id:2,
				name:'已匹配'
			}],
			tabIndex:0,
			scrollList:[{
				avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/550dcd82-08c7-41a5-a48e-a1d33f1c23da.png',
				name:'麒麟队长',
				status:'匹配成功'
			},{
				avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/550dcd82-08c7-41a5-a48e-a1d33f1c23da.png',
				name:'帮扶队长',
				status:'未匹配'
			},{
				avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/550dcd82-08c7-41a5-a48e-a1d33f1c23da.png',
				name:'盘古队长',
				status:'未匹配'
			}],
			listCatchData:{},
			load:{},
			pageSize:16,
			loading:false,
        }
    },
	onLoad(){
		this.getList(this.tabIndex)
	},
    methods: {
		changeSwiper(e) {
			const {
				current
			} = e.detail
			this.tabIndex = current
			console.log('changeSwiper——this.tabIndex',this.tabIndex)
			if(!this.listCatchData[this.tabIndex] || this.listCatchData[this.tabIndex].length === 0){
				this.getList(this.tabIndex)
			}
		},
		tabClick({data,index}){
			this.tabIndex = index
			console.log('tabClick——this.tabIndex',this.tabIndex)
		},
		refreshList(current) {
			this.listCatchData = {}
			this.$set(this.listCatchData,current,[])
			this.load = {}
			this.getList(current)
		},
		listloadmore(val){
			if(this.load[this.tabIndex].loading === 'noMore') return
			this.load[this.tabIndex].page++
			this.getList(this.tabIndex)
		},
		getList(current) {
			if(!this.load[current]){
				this.load[current] = {
					page:1,
					loading:'loading'
				}
			}
			const params = {
				audit_status:current,
				page:this.load[current].page,
				num:this.pageSize
			}
			if(current==0){
				delete params.audit_status
			}
			console.log('params',params)
			this.loading = true
			socialHome(params).then(res => {
				console.log('socialHome',res)
				this.loading = false
				const data = res.home.data
				console.log('data',data)
				//如果没数据了
				if(data&&(data.length === 0 || data.length < this.pageSize)){
					let oldLoad = {}
					oldLoad.loading = 'noMore'
					oldLoad.page = this.load[current].page
					this.$set(this.load,current,oldLoad)
					// 强制渲染页面
					this.$forceUpdate()
					if(data.length === 0) return
				}
				let oldList = this.listCatchData[current] || []
				oldList.push(...data)
				this.$set(this.listCatchData,current,oldList)
			}).finally(()=>{
				this.loading = false
			})
		},
		previewImage(banners,index) {
			uni.previewImage({
				urls:this.bannerImgs,
				current:index,
				loop:true
			})
		}
    }
}
</script>